how-to-add-auto-complete-search-box-in-reactjs

Step 1: Create a new React application =>

npx create-react-app auto-complete-search-app

Step 2: Once the project has been created then navigate to the folder =>

cd auto-complete-search-app

Step 3: Now simply install the material-ui packages =>

Step 4 : Add a new file in the src folder as CustomSearch.js

Step 5 : Go to CustomSearch.js and write the below code.

Step 6 : Go to app.js in the src folder and import CustomSearch component at the top =>

import CustomSearch from ‘./CustomSearch’;

Step 7 : Remove header tag from app.js and add CustomSearch as =>

    <div className="App">
        <CustomSearch />
    </div>

Step 8 : run the application as =>

    npm start

Step 9 : once the application gets loaded in the browser then type any alphabet in the search box.

React Tutorial